<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>情境情绪应对初级</title>
        <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
        <script src="../../../../CommonTool/commonNetWork.js"></script>
        <script src="../../../../script/jquery.js"></script>
        <script src="../SituationalCoping.js"></script>
        <link rel="stylesheet" href="../SituationlCoping.css" />
    </head>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title">场景-中级-情境情绪应对</div>
        </header>
        <div class="aui-grid">
            <div class="aui-row">
                <div class="aui-col-xs-2"></div>
                <div class="aui-col-xs-8">
                    <div class="image-container">
                        <div class="ImageBackground">
                            <div class="image" id="image1" data-target="blank-box1">
                                <img src="http://172.16.32.194/social/middle/情境情绪应对/1/1.png" alt="Image 1" />
                            </div>
                        </div>
                        <div class="ImageBackground">
                            <div class="image" id="image2" data-target="blank-box2">
                                <img src="http://172.16.32.194/social/middle/情境情绪应对/1/2.png" alt="Image 2" />
                            </div>
                        </div>
                        <!-- ` -->
                    </div>
                    <div class="dropBody">
                        <div class="blank-box" id="blank-box1">
                            <span class="box-number" id="number1">1</span>
                        </div>
                        <div class="blank-box" id="blank-box2">
                            <span class="box-number" id="number2">2</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footbar">
            <p class="barLeft" onclick="toggleMenu()">第一关</p>
            <div class="barCenter">
                <div id="InitialButton" style="float: left; margin-left: 4%" onclick="InitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="" />
                </div>
                <div
                    id="InitialButton1"
                    style="float: left; margin-left: 4%; display: none"
                    onclick="ShowInitialClick()"
                >
                    <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="" />
                </div>
                <div id="InitialButton2" style="float: left; margin-left: 3%; display: none">
                    <audio src="http://172.16.32.194/social/sort.mp3" id="audioBody" controls autoplay></audio>
                    <img
                        style="width: 2rem; height: 1.6rem; margin-top: 12%"
                        src="http://172.16.32.194/commonButton/播放2.png"
                        alt=""
                        onclick="ImgAudioClick()"
                    />
                </div>
                <div id="InitialButton3" style="float: left; margin-left: 4%; display: none">
                    <img id="passImg" src="http://172.16.32.194/commonButton/提示.png" alt="" onclick="TipsClick()" />
                </div>
                <div id="InitialButton4" style="float: left; margin-left: 4%; display: none" onclick="ResetClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/刷新1.png" alt="" />
                </div>
            </div>

            <p class="barright">
                <img src="../../../../image/next2.png" alt="" class="BarBottom" onclick="go_forward();" />
            </p>
            <p class="barright">
                <img
                    style="width: 3.5rem; height: 1.5rem; margin-top: 6%"
                    src="http://172.16.32.194/commonButton/pass1.png"
                    alt=""
                    onclick="passclick();"
                />
            </p>
            <p class="barright">
                <img
                    src="http://172.16.32.194/commonButton/prev1.png"
                    alt=""
                    class="BarBottom"
                    onclick="next_forward();"
                />
            </p>
        </div>
        <!-- 通过 -->
        <div class="backdrop_bg" id="backdropPass">
            <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
            <div class="backdrop_contentPasseGif"></div>
        </div>
        <!-- 全部答对   -->
        <div class="backdrop_bg" id="backdrop_bgright" onclick="hideRight()">
            <audio src="http://172.16.32.194/tipvideo/right1.mp3" id="audioBodyRight"></audio>
            <div class="backdrop_contentGif">
                <div id="backdrop_text"></div>
            </div>
        </div>
        <!-- 答错不得分 -->
        <div class="backdrop_bg" id="backdropMistake" onclick="hideMistake()">
            <audio src="http://172.16.32.194/tipvideo/error3.mp3" id="audioBodyMistake"></audio>
            <div class="backdrop_contentMistakeGif">
                <div id="backdrop_text"></div>
            </div>
        </div>
        <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>
        </div>
    </body>
</html>

<script>
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "场景";
    var sceneLevel = "中级";
    var courseType = "情境情绪应对";
    var classSort = "1";
    var moodType = "开心";
    var remarks = "问题1";
    var classType = "学习";
    var indexnumber = 0;
    var indexErrornumber = 0;
    apiready = function () {
        document.getElementById("audioBody").style.display = "none";
        token = api.pageParam.token;
        userid = api.pageParam.uid;
        groupId = api.pageParam.groupId;
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "";
        // CommonNetWork()
        // document.getElementById('floatingImage1').style.display='none'
        // document.getElementById('floatingImage2').style.display='none'
    };
    function BlankBox1() {
        document.getElementById("floatingImage1").style.display = "block";
        setTimeout(() => {
            document.getElementById("floatingImage1").style.display = "none";
        }, 2000);
    }
    function BlankBox2() {
        document.getElementById("floatingImage2").style.display = "block";
        setTimeout(() => {
            document.getElementById("floatingImage2").style.display = "none";
        }, 2000);
    }
    function passclick() {
        document.getElementById("backdropPass").style.display = "block";
        document.getElementById("audioBodyPass").play();
        setTimeout(() => {
            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            api.openWin({
                name: "Probrem2",
                url: "./Probrem2.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
            });
        }, 2000);
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "right";
        CommonNetWork();
    }
    let startX, startY; // 记录触摸开始的坐标
    let isDragging = false; // 标记是否正在拖动
    let draggedImage; // 记录正在被拖动的图片元素
    let originalPosition; // 记录图片的原始位置信息
    let originalParent; // 记录图片原来所在的父元素

    // 获取所有图片元素
    const images = document.querySelectorAll(".image");
    images.forEach((image) => {
        image.addEventListener("touchstart", function (e) {
            // 获取触摸点的初始坐标
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
            isDragging = true;
            draggedImage = this;
            // 记录图片的原始位置信息（相对于视口的坐标和尺寸）
            originalPosition = {
                left: this.offsetLeft,
                top: this.offsetTop,
                width: this.offsetWidth,
                height: this.offsetHeight,
            };
            // 记录图片原来所在的父元素
            originalParent = this.parentNode;
        });

        image.addEventListener("touchend", function (e) {
            isDragging = false;
            if (draggedImage) {
                const blankBoxes = document.querySelectorAll(".blank-box");
                blankBoxes.forEach((box) => {
                    const rect = box.getBoundingClientRect();
                    const touchEndX = e.changedTouches[0].pageX;
                    const touchEndY = e.changedTouches[0].pageY;
                    if (
                        touchEndX >= rect.left &&
                        touchEndX <= rect.right &&
                        touchEndY >= rect.top &&
                        touchEndY <= rect.bottom
                    ) {
                        const targetId = draggedImage.dataset.target;
                        if (box.id === targetId) {
                            // 计算图片在空白框中居中显示需要的偏移量
                            // 这样写图片会消失
                            // const offsetX = (rect.width - draggedImage.offsetWidth) / 2;
                            // const offsetY = (rect.height - draggedImage.offsetHeight) / 2;
                            // draggedImage.style.position = 'absolute';
                            // draggedImage.style.left = `${rect.left + offsetX}px`;
                            // draggedImage.style.top = `${rect.top + offsetY}px`;
                            if (targetId == "blank-box1") {
                                indexnumber = indexnumber + 1;
                                document.getElementById("number1").style.display = "none";
                            }
                            if (targetId == "blank-box2") {
                                indexnumber = indexnumber + 1;
                                document.getElementById("number2").style.display = "none";
                            }
                            box.style.border = "4px dashed green";
                            box.style.zIndex = "100";
                            box.classList.add("dropped");
                            originalParent.appendChild(draggedImage);
                            if (indexnumber == 2) {
                                document.getElementById("backdrop_bgright").style.display = "block";
                                document.getElementById("audioBodyRight").play();
                            }
                        } else {
                            // 移除图片
                            // originalParent.removeChild(draggedImage);
                            //如果放错了就刷新
                            // history.go(0)
                            box.style.border = "4px dashed red";
                            if (targetId === "blank-box2" && box.id === "blank-box1") {
                                document.getElementById("number1").style.display = "none";
                                indexErrornumber = indexErrornumber + 1;
                            }
                            if (targetId === "blank-box1" && box.id === "blank-box2") {
                                document.getElementById("number2").style.display = "none";
                                indexErrornumber = indexErrornumber + 1;
                            }
                            if (indexErrornumber == 2) {
                                document.getElementById("backdropMistake").style.display = "block";
                                document.getElementById("audioBodyMistake").play();
                            }
                        }
                    }
                });
                // draggedImage = null;
            }
        });
    });

    document.addEventListener(
        "touchmove",
        function (e) {
            if (isDragging && draggedImage) {
                e.preventDefault(); // 阻止默认的滚动等行为
                const currentX = e.touches[0].pageX;
                const currentY = e.touches[0].pageY;
                const dx = currentX - startX;
                const dy = currentY - startY;
                draggedImage.style.transform = `translate(${dx}px, ${dy}px)`;
            }
        },
        { passive: false }
    ); // 添加这个选项，设置为false表示不采用被动监听模式
    // function close_win() {
    //     document.querySelectorAll("audio").forEach((audio) => audio.pause());
    //     currentTimestamp = Date.now();
    //     operationName = "end";
    //     additionalInfo = "out";
    //     CommonNetWork();
    //     api.openWin({
    //         name: "SceneMenu-Middle",
    //         url: "../../../SceneMenu-Middle.html",
    //         reload: true,
    //         pageParam: {
    //             uid: userid,
    //             token: token,
    //             groupId: groupId,
    //         },
    //     });
    // }
    function go_forward() {
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: "Probrem2",
            url: "./Probrem2.html",
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function next_forward(data) {
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: "Story1",
            url: "./Story1.html",
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
                haved: "haved",
            },
            reload: true,
        });
    }
    function goto_page(number) {
        const pages = [
            "Material1",
            "Material2",
            "Material3",
            "Material4",
            "Material5",
            "Material6",
            "Material7",
            "Material8",
            "Material9",
            "Material10",
        ];
        var name = pages[number - 1];
        var url = "../" + name + "/Story1.html";
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>
